<template>
  <div class="dns-management">
    <h2>智能DNS系统管理</h2>
    <el-tabs type="border-card">
      <el-tab-pane label="域名引流规则">
        <DomainRedirectRules :redirectRules="redirectRules" @add-rule="addRule" @edit-rule="editRule" @delete-rule="deleteRule"/>
      </el-tab-pane>
      <el-tab-pane label="上游DNS设置">
        <UpstreamDnsSettings :upstreamDns="upstreamDns" @save-settings="saveSettings"/>
      </el-tab-pane>
      <el-tab-pane label="自定义域名管理">
        <CustomDomainManagement :domains="domains" @add-domain="addDomain" @edit-domain="editDomain" @delete-domain="deleteDomain"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DomainRedirectRules from './components/DomainRedirectRules.vue';
import UpstreamDnsSettings from './components/UpstreamDnsSettings.vue';
import CustomDomainManagement from './components/CustomDomainManagement.vue';

export default {
  name: "DnsIndex",
  components: {
    DomainRedirectRules,
    UpstreamDnsSettings,
    CustomDomainManagement
  },
  data() {
    return {
      redirectRules: [
        { id: 1, domain: 'example.com', sourceIp: '192.168.1.1', requestTime: '12:00-14:00', responsePolicy: '策略A', targetIp: '10.0.0.1' },
        { id: 2, domain: 'test.com', sourceIp: '192.168.1.2', requestTime: '14:00-16:00', responsePolicy: '策略B', targetIp: '10.0.0.2' }
      ],
      domains: [
        { id: 1, name: 'example.com', description: '这是example.com的描述' },
        { id: 2, name: 'test.com', description: '这是test.com的描述' }
      ],
      upstreamDns: {
        server: '',
        port: 53
      }
    };
  },
  methods: {
    addRule(rule) {
      rule.id = this.redirectRules.length + 1;
      this.redirectRules.push(rule);
      this.$message({
        type: 'success',
        message: '规则添加成功!'
      });
    },
    editRule(updatedRule) {
      const index = this.redirectRules.findIndex(rule => rule.id === updatedRule.id);
      if (index !== -1) {
        this.$set(this.redirectRules, index, updatedRule);
        this.$message({
          type: 'success',
          message: '规则更新成功!'
        });
      }
    },
    deleteRule(id) {
      this.$confirm(`此操作将永久删除规则 ${id}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.redirectRules = this.redirectRules.filter(rule => rule.id !== id);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    addDomain(domain) {
      domain.id = this.domains.length + 1;
      this.domains.push(domain);
      this.$message({
        type: 'success',
        message: '域名添加成功!'
      });
    },
    editDomain(updatedDomain) {
      const index = this.domains.findIndex(domain => domain.id === updatedDomain.id);
      if (index !== -1) {
        this.$set(this.domains, index, updatedDomain);
        this.$message({
          type: 'success',
          message: '域名更新成功!'
        });
      }
    },
    deleteDomain(id) {
      this.$confirm(`此操作将永久删除域名 ${id}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.domains = this.domains.filter(domain => domain.id !== id);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    saveSettings(settings) {
      // 这里可以添加实际的保存逻辑，例如发送请求到服务器
      console.log('Saving settings:', settings);
      this.upstreamDns = { ...settings };
      this.$message({
        type: 'success',
        message: '设置保存成功!'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.dns-management {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;

  h2 {
    margin-bottom: 20px;
  }
}
</style>
